$name: #{'.' + $namespace + '-input'};

#{$name} {
  --input-placeholder-color: #999;
  $gap: 16rpx;
  display: flex;

  &__prefix {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    &>:nth-child(n) {
      margin-right: $gap;
    }
  }

  &__suffix {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    &>:nth-child(n) {
      margin-left: $gap;
    }
  }

  &__content {
    flex: auto;
    position: relative;
    display: flex;
  }

  &__limit {
    background: var(--info-background-color);
    margin-left: $gap;
  }

  &__input {
    .input-placeholder {
      color: var(--input-placeholder-color);
    }
  }

  &.is-disabled {
    color: var(--disabled-text-color);
    pointer-events: none;

    #{$name}__input {

      .input-placeholder {
        color: inherit;
      }
    }
  }

  &--textarea {
    width: 100%;

    #{$name}__input {
      height: 220rpx;
    }

    #{$name}__limit {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}